<template>
	<view style="height: 100vh; background-color: #FFFFFF;">
		<u-navbar title-color="#FFFFFF" height="48" back-icon-color="#FFFFFF" :border-bottom="false" :is-fixed="true" :title="'签到中心'"></u-navbar>
		<view class="app-content">
<!-- 			签到图标
			<view >
				<u-button @click="show = true">签到类型</u-button>
				<u-select v-model="show" :list="list" @confirm="typeChose" ></u-select>
			</view> -->
			<view class="padding-lg">
				<button @click="checkIn" :disabled="btnDis"
				 style="width: 250px;height: 250px;margin: 20px auto;border-radius: 5000px;box-shadow: 0 1px 6px;background-color: #007AFF;">
					<view class="text-bold text-center" :class="btnDis?'text-gray':'text-white'" style="color: #fff;font-size: 40px;margin-top: 60px;line-height: 50px;">{{text}}</view>
					<view class="text-center" style="color: #fff;" :class="btnDis?'text-gray':'text-white'">{{time}}</view>
				</button>
			</view>
			<u-toast ref="uToast" >
				<view>
					已确认处置		
				</view>
			</u-toast>
			<uni-list :border="true" v-if="signList.length>0">
				<uni-list-item v-for="(item,index) in signList" :key = "item.ucId">
				    <!-- 自定义 header -->
				    <view slot="header" class="slot-box">
						签到时间：{{item.signTime|dateFormat}}
					</view>
				    <!-- 自定义 body -->
				    <text slot="body" class="slot-box slot-text">
						签到类型：{{item.signType | signType}}
					</text>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import utils from "../../../utils/utils.js"
	export default {
		data() {
			return {
				show:false,
				list:[
					{
						value:1,
						label:'下班签退'
					}
				],
				signList:[],
				text:"",
				btnDis:false,
				time:null,
				signType:'0',
				userLocation:{},
			}
		},
		onShow() {
			this.initView()
			this.getUserLocation()
			this.getDailySign()
		},
		methods: {
			initView(){
				let _this = this
				//this.getDailySign()
				this.getTime()
				if(this.timerInterval){
					clearInterval(this.timerInterval)
				}else{
					this.timerInterval = setInterval(function(){
						_this.getTime()
					}, 1000)
				}
				
			},
			// 获取当前时间时分秒
			getTime () {
			  this.time = utils.formatDate(new Date(), 'HH:mm:ss')
			},
			//获取当天签到记录
			getDailySign(){
				this.utils.request("/api/app/user/getUserDailySigns", {ucid:this.$route.params.ucId}, "post", "app", true).then(res => {
					this.btnDis=false
					this.signList = res.data
					if(this.signList.length==0){
						this.text = "上班签到"
					}else if(this.signList.length==1){
						this.text = "下班签退 "
						this.signType='1'
					}else{
						this.text = "已签退 "
						this.btnDis=true
					}
					this.initView()
				}).catch(error => {
					console.log(error)
				})
			},
			getUserLocation(){
				window.native.getLocation(res=>{
					this.userLocation=res.data
				})
			},
			checkIn(){
				this.utils.request("/api/app/user/addInUserSign", {
						signType: this.signType,
						location: this.userLocation.addr,
						longitude: this.userLocation.longitude,
						latitude: this.userLocation.latitude}, "post", "app", true).then(res => {
					console.log(res)
					// 签到提示
					switch(this.signType){
						case "0":
						this.$refs.uToast.show({
							title: '签到成功',
							type: 'success', 
						})
						break;
						case "1":
						this.$refs.uToast.show({
							title: '签退成功',
							type: 'success', 
						})
						break;
						default:
						break;							
					}
					this.btnDis=true
					this.getDailySign()
				}).catch(error => {
					console.log(error)
				})
				this.initView()
			},
			typeChose(val){
				this.text = val[0].label
				this.signType = val[0].value
				this.btnDis=false
			}
		}
	}
</script>

<style>

</style>
